<template>
    <div>
        <div v-if="queryDetail">
            <el-tabs type="border-card" v-model="activeName" style="width: 90%;margin-left: 60px;">
                <el-tab-pane v-if="active" label="手动模式" name="first">
                    <el-form :model="csaForm" ref="csaForm" :rules="rules" label-width="100px" class="demo-csaForm" onsubmit="return false" style="margin-top: 20px">
                        <el-row>
                            <el-col :span="10" :offset=1>
                                <el-form-item label="用印事项" prop="applyforUsingTheItem">
                                    <el-select v-model="csaForm.applyforUsingTheItem" placeholder="请选择用印事项" style="width: 448px">
                                <span v-for="(item,index) in applyforUsingTheItem" :key="index">
                                    <el-option v-if="item.fileTypeId==='暂未上传'" :value="item.id+''" :label="item.fileName"></el-option>
                                </span>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset=1>
                                <el-form-item label="案件" prop="caseNo">
                                    <el-input v-model="csaForm.caseNo" readonly="readonly"  @click.native="showDialog" placeholder="请选择案件" clearable></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset=1>
                                <el-form-item label="委托人" prop="sendPerson">
                                    <el-input v-model="csaForm.sendPerson" placeholder="选择案件后自动填入" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" :offset=1>
                                <el-form-item label="相关文件" prop="caseCause">
                                    <el-button type="primary" @click="fileUp">上传文件<i class="el-icon-upload el-icon--right"></i></el-button>
                                    <el-upload
                                            class="upload-demo"
                                            ref="upload"
                                            action=""
                                            :limit="1"
                                            :http-request="submitUpload"
                                            :before-upload="beforeUpload"
                                            :on-exceed="onExceed"
                                            v-show="false">
                                        <el-button ref="xzwj">选取文件</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="21" :offset=1>
                                <el-form-item label="备注" prop="remark">
                                    <el-input type="textarea" v-model="csaForm.remark"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="1" :offset=9>
                                <el-button type="primary" @click="clientFormSubmit('csaForm')" style="margin-left: -10px">立即创建</el-button>
                            </el-col>
                            <el-col :span="1" :offset=2>
                                <el-button @click="resetForm('cdForm')">重置</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="自动模式"  name="second">
                    <transition
                            name="custom-classes-transition"
                            enter-active-class="animated bounceIn"
                            leave-active-class="animated bounceOut">
                        <div v-if="!nextStep">
                            <el-row style="margin-top: 20px;">
                                <el-col :span="21" :offset=1>
                                    <span style="color: red">*</span><span style="font-size: 18px">案件:</span>
                                    <el-input v-model="csaForm.caseNo" :readonly="readonly" @click.native="showDialog" placeholder="请选择案件" clearable style="margin-top: 10px"></el-input>
                                </el-col>
                                <el-row style="margin-top: 100px">
                                    <el-col :span="1" :offset=10>
                                        <transition
                                                name="custom-classes-transition"
                                                enter-active-class="animated tada"
                                                leave-active-class="animated bounceOutRight">
                                            <!--                            animated tada   animated bounceOutRight bounce shake bounceIn bounceOut-->
                                            <el-button v-if="csaForm.caseNo!==''" @click="nextStepClick" type="primary" style="margin-left: -10px">下一步</el-button>
                                        </transition>
                                    </el-col>
                                </el-row>
                            </el-row>
                        </div>
                    </transition>
                    <transition
                            name="custom-classes-transition"
                            leave-active-class="animated bounceOutRight">
                        <div v-if="nextStep" style="margin-top: 20px">
                            <el-button type="primary" @click="nextStep=!nextStep">重选</el-button>
                            <span style="font-size: 20px;margin-left: 500px">案号:{{csaForm.caseNo}}</span>
                            <el-table
                                    border
                                    ref="multipleTable"
                                    :data="applyforUsingTheItem"
                                    tooltip-effect="dark"
                                    style="width: 100%;margin-top: 30px"
                                    @selection-change="handleSelectionChange">
                                <el-table-column
                                        type="selection"
                                        :selectable="check"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        prop="id"
                                        label="编号">
                                </el-table-column>
                                <el-table-column
                                        prop="fileName"
                                        label="模板名称">
                                </el-table-column>
                                <el-table-column
                                        prop="fileTypeId"
                                        label="是否上传">
                                </el-table-column>
                            </el-table>
                            <el-button type="primary" @click="clientFormSubmit('')" style="margin-left: 600px;margin-top: 20px; width: 100px;">上传</el-button>
                        </div>
                    </transition>
                </el-tab-pane>
                <el-tab-pane v-if="showPane" label="用印记录" name="third">
                    <el-row>
                        <el-col :span="3">
                            <el-input v-model="caseSealSearch.searchData" clearable></el-input>
                        </el-col>
                        <el-col :span="3" :offset=1>
                            <el-select v-model="caseSealSearch.select" filterable placeholder="请选择">
                                <el-option label="案号搜索" value="1"></el-option>
                                <el-option label="收函人搜索" value="2"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3" :offset=1>
                            <el-select v-model="caseSealSearch.itemName" filterable placeholder="请选择" clearable>
                        <span v-for="(item,index) in applyforUsingTheItem" :key="index">
                            <el-option :value="item.id+''" :label="item.fileName"></el-option>
                        </span>
                            </el-select>
                        </el-col>
                        <el-col :span="3" :offset=1>
                            <el-select v-model="caseSealSearch.applyforApprovalStatus" clearable>
                                <el-option label="审批中" value="1"></el-option>
                                <el-option label="审批通过" value="2"></el-option>
                                <el-option label="审批不通过" value="3"></el-option>
                            </el-select>
                        </el-col>

                        <el-col :span="3" :offset=1>
                            <el-select v-model="caseSealSearch.sortMode">
                                <el-option label="自定义排序" value="1"></el-option>
                                <el-option label="编号倒序" value="2"></el-option>
                                <el-option label="领用时间正序" value="3"></el-option>
                                <el-option label="领用时间倒序" value="4"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="1" :offset=1>
                            <el-button type="primary" @click="seniorSearch">检索</el-button>
                        </el-col>
                    </el-row>
                    <el-table
                            :data="caseSealData"
                            border
                            style="width: 100%;margin-top: 10px;margin-bottom: 10px">
                        <el-table-column
                                align="center"
                                prop="caseNo"
                                label="案号"
                                width="149">
                            <template slot-scope="scope">
                                <a href="javascript:" @click="queryDetails(scope.row.id)">
                                    {{scope.row.caseNo}}
                                </a>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="applyforRecipient"
                                label="领用人">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="sendPerson"
                                label="收函人">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="itemName"
                                label="用印事项">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="applyforReceive"
                                label="领用日期">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="applyforApprovalStatus"
                                label="审批状态"
                                :formatter="caseApproveStatusFormatter">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                width="105">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="handleClick(scope.row.id)" class="summary_btn" :id="scope.row.applyforApprovalStatus">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[1, 5, 10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
            <el-dialog
                    title="请选择案件"
                    :visible.sync="getCase"
                    width="50%">
                <!--                    :before-close="handleClose"-->
                <span>
                    <el-table
                            @row-click="rowClick"
                            :data="caseList"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="caseNo"
                                label="案号">
                        </el-table-column>
                        <el-table-column
                                prop="caseWtr"
                                label="委托人">
                        </el-table-column>
                        <el-table-column
                                prop="caseOppositeParties"
                                label="对方当事人">
                        </el-table-column>
                        <el-table-column
                                prop="caseAgencyfee"
                                label="代理费">
                        </el-table-column>
                        <el-table-column
                                prop="caseAttorney"
                                label="承办律师">
                        </el-table-column>
                        <el-table-column
                                prop="collectionTime"
                                label="收案日期">
                        </el-table-column>
                    </el-table>
                </span>
                <span slot="footer" class="dialog-footer">
<!--                    <el-button @click="getLawyersList = false">取 消</el-button>-->
                    <el-button type="primary" @click="getCase = false">取 消</el-button>
                </span>
            </el-dialog>
        </div>
        <div v-if="!queryDetail">
            <CaseDetails :case-id="caseId" @back="back"></CaseDetails>
        </div>
    </div>
</template>
<script>
    import AddCaseService from "../../model/AddCaseService";
    import CaseDetails from "./CaseDetails";
    import $ from "jquery";


    const addCaseService =AddCaseService.getInstance();
    export default {
        name: "AddCaseSealApplyfor",
        props:[
            'activeName',
            'case',
            'id'
        ],
        components:{
            CaseDetails
        },
        data(){
            return{
                active:true,//手动模式
                caseId:"",//案件ID
                applyforUsingTheItem:[],//文件类型
                file:"",//文件
                fileName:"",//文件名
                getCase:false,//案件模态框
                caseList:[],//案件
                showPane:false,//用印记录
                multipleSelection: [],//选中的行
                nextStep:false,//下一步
                items:[],//已经上传过的
                readonly:true,
                caseSealData:[],//用印数据
                queryDetail:true,//查看案件详情

                total:"",//数据总条数
                pageSize:5,//每页显示条数
                pageNum:1,//当前页

                caseSealSearch:{//高级检索
                    applyforRecipient:"",//领用人
                    searchData:"",//搜索框数据
                    select:"1",//下拉框选项
                    applyforApprovalStatus:"",//审批状态
                    applyforUsingTheItem:"",//用印类型
                    sortMode:"1",//排序方法
                },

                csaForm:{//用印申请表单
                    caseid:"",//案件id
                    caseNo:"",//案号
                    applyforReceive:"",//申请日期
                    applyforRecipient:"",//申请人
                    sendPerson:"",//委托人
                    itemName:"",//用印事项
                    filepath:"",//相关文件
                    remark:"",//备注
                },
                rules:{
                    caseNo:[
                        {required:true,message:"请选择案件！",trigger:"blur"}
                    ],
                    applyforUsingTheItem:[
                        {required:true,message:"请选择用印事项！",trigger:"blur"}
                    ],
                    sendPerson:[
                        {required:true,message:"请选择委托人！",trigger:"blur"}
                    ]
                },
            }
        },

        created() {
            this.init()
        },

        methods:{
            handleCurrentChange(val){//当前页发生变化
                const page={
                    pageNum:val
                };
                this.queryCaseSeal(page);
            },
            handleSizeChange(val){//每页数据条数变化
                    const page={
                        pageSize:val
                    };
                    this.queryCaseSeal(page);
            },
            init(){//初始化
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                addCaseService.queryFt(this.$http).then(msg=>{
                    let data=msg.data.data;
                    for (let i = 0; i < data.length; i++) {
                        data[i].fileTypeId="暂未上传";
                    }
                    this.applyforUsingTheItem=data
                });
                if(this.case===undefined){
                    if(this.id===undefined){
                        const params={
                            hrEmpId:JSON.parse(localStorage["user"])[0].hrEmpId
                        };
                        addCaseService.querySenior(this.$http,params).then(msg=>{
                            this.caseList=msg.data.data.list;
                            this.$loading().close();
                        });
                        this.caseSealSearch.applyforRecipient=JSON.parse(localStorage["user"])[0].userRealname;
                        this.queryCaseSeal(null);
                        this.showPane=true
                    }else{
                        addCaseService.queryCaseSealApplyfor(this.$http,this.id).then(msg=>{
                            if(msg.data.data!=null){
                                const strings=msg.data.data.applyforUsingTheItem.split(",");
                                this.items=strings;
                                for (let i = 0; i < this.applyforUsingTheItem.length ; i++) {
                                    for (let j = 0; j < strings.length; j++) {
                                        if(parseInt(this.applyforUsingTheItem[i].id)===parseInt(strings[j])){
                                            this.applyforUsingTheItem[i].fileTypeId="此文书已上传~"
                                        }
                                    }
                                }
                            }
                        });
                        this.csaForm.caseid=this.id;
                        const param={
                            id:this.id
                        };
                        addCaseService.querySenior(this.$http,param).then(msg=>{
                            this.csaForm.caseNo=msg.data.data.list[0].caseNo
                            this.$loading().close();
                        });
                        this.active=false
                    }
                }else{
                    addCaseService.queryCaseSealApplyfor(this.$http,this.case.caseLawId).then(msg=>{
                        if(msg.data.data!=null){
                            const strings=msg.data.data.applyforUsingTheItem.split(",");
                            this.items=strings;
                            for (let i = 0; i < this.applyforUsingTheItem.length ; i++) {
                                for (let j = 0; j < strings.length; j++) {
                                    if(parseInt(this.applyforUsingTheItem[i].id)===parseInt(strings[j])){
                                        this.applyforUsingTheItem[i].fileTypeId="此文书已上传~"
                                    }
                                }
                            }
                        }
                        this.$loading().close();
                    });
                    this.csaForm.caseid=this.case.caseLawId;
                    this.csaForm.caseNo=this.case.caseNo;
                    this.csaForm.sendPerson=this.case.caseWtr
                }
            },
            queryCaseSeal(params){//查询用印记录
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                const btns=$(".summary_btn");
                for (let i = 0; i <btns.length ; i++) {
                    $(btns[i]).removeAttr('disabled');
                }
                const param={
                    applyforRecipient:JSON.parse(localStorage["user"])[0].userRealname,
                    pageNum:params==null?this.pageNum:(params.pageNum===undefined?this.pageNum:params.pageNum),
                    pageSize:params==null?this.pageSize:(params.pageSize===undefined?this.pageSize:params.pageSize)
                };
                addCaseService.querySealApplyfor(this.$http,param).then(msg=>{
                    this.caseSealData=msg.data.data.list;
                    this.total=msg.data.data.total;
                    this.pageSize=msg.data.data.pageSize;
                    this.$loading().close();
                    setTimeout(()=>{
                        const btns=$(".summary_btn");
                        for (let i = 0; i <btns.length ; i++) {
                            if(parseInt(btns[i].id)!==3){//非审批不通过不可删除
                                $(btns[i]).prop('disabled','disabled');
                            }
                        }
                    },100)
                });
            },
            back(){//回调函数
              this.queryDetail=true;
              this.queryCaseSeal(null);
            },
            queryDetails(id){//查看案件详情
                this.queryDetail=false;
                this.caseId=id;
                this.$emit("hideTitle")
            },
            seniorSearch(){//高级查询
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                addCaseService.querySealApplyfor(this.$http,this.caseSealSearch).then(msg=>{
                    this.caseSealData=msg.data.data
                    this.$loading().close()
                })
            },
            caseApproveStatusFormatter(row, column, cellValue){//审批状态
                if(cellValue==="1"){
                    return "审批中"
                }else if(cellValue==="2"){
                    return "审批通过"
                }else{
                    return "审批不通过"
                }
            },
            // eslint-disable-next-line no-unused-vars
            check(row,index){//判断复选框是否可用
                if(row.fileTypeId==="暂未上传"){
                    return true
                }else{
                    return false
                }
            },
            nextStepClick(){//下一步
                this.nextStep=true;
            },
            handleSelectionChange(val) {//选中行事件
                this.multipleSelection = val;
            },
            showDialog(){//显示对话框
                if(this.case===undefined&&this.id===undefined){
                    this.getCase=true
                }
            },
            rowClick(row){//案件表格点击事件//, column, event
                for (let i = 0; i < this.applyforUsingTheItem.length ; i++) {
                    this.applyforUsingTheItem[i].fileTypeId="暂未上传"
                }
                addCaseService.queryCaseSealApplyfor(this.$http,row.id).then(msg=>{
                    const strings=msg.data.data.applyforUsingTheItem.split(",");
                    this.items=strings;
                    for (let i = 0; i < this.applyforUsingTheItem.length ; i++) {
                        for (let j = 0; j < strings.length; j++) {
                            if(parseInt(this.applyforUsingTheItem[i].id)===parseInt(strings[j])){
                                this.applyforUsingTheItem[i].fileTypeId="此文书已上传~"
                            }
                        }
                    }
                });
                this.csaForm.caseid=row.id;
                this.csaForm.sendPerson=row.caseWtr;
                this.csaForm.caseNo=row.caseNo;
                this.getCase=false;
            },
            fileUp(){//文件上传点击事件
                this.$refs.xzwj.$el.click()
            },
            onExceed(){//文件个数超出限制时
                this.$message({
                    type:"warning",
                    message:"本次文件上传已达限制"
                })
            },
            beforeUpload(file){//文件上传之前
                this.files=file;
                this.fileName=file.name;
            },
            submitUpload() {//文件上传提交事件
                if (this.fileName === "") {
                    this.$message.warning('请选择要上传的文件！');
                    return false
                }
                let fileFormData = new FormData();
                fileFormData.append('file', this.files, this.fileName);//file是键，files是值，就是要传的文件，fileName是要传的文件名
                let requestConfig = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                };
                addCaseService.fileUp(fileFormData,requestConfig,this.$http).then(msg=>{
                    this.csaForm.filepath=msg.data.data
                    this.$message({
                        type:"success",
                        message:"上传成功~"
                    })
                })
            },
            resetForm(formName) {//重置表单
                this.$refs[formName].resetFields();
            },
            clientFormSubmit(formName){//提交用印表单事件
                if(formName===""){
                    if(this.multipleSelection.length===0){
                        this.$message({
                            type:"error",
                            message:"至少选中一条~"
                        })
                    }else{
                        this.$loading({//懒加载
                            lock: true,
                            text: '正在添加...',
                            spinner: 'fa fa-refresh fa-spin fa-3x',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        let applyforUsingTheItem=[];
                        for (let i = 0; i < this.multipleSelection.length; i++) {
                            applyforUsingTheItem.push(this.multipleSelection[i].id)
                        }
                        this.csaForm.applyforUsingTheItem=applyforUsingTheItem;
                        this.csaForm.applyforReceive=this.$date.formatDate(new Date(),"yyyy-MM-DD hh:mm:ss");
                        this.csaForm.applyforRecipient=JSON.parse(localStorage["user"])[0].userRealname;
                        let formData = new FormData();
                        for(const key in this.csaForm){
                            if(Object.prototype.hasOwnProperty.call(this.csaForm, key)){
                                if(this.csaForm[key]!=null){
                                    formData.append(key,this.csaForm[key]);
                                }
                            }
                        }
                        addCaseService.addBatch(this.$http,formData).then(msg=>{
                            if(msg.data.status==="50000"){
                                this.$message({
                                    type:"error",
                                    message:"出错了呢~"
                                });
                                this.$loading().close()
                            }else {
                                this.$message({
                                    type:"success",
                                    message:"提交成功~"
                                });
                                this.$loading().close();
                                this.$emit("changeActive",1)
                            }
                        })
                    }
                }else{
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.csaForm.filepath=== "") {
                                this.$message.warning('请选择要上传的文件！');
                            }else{
                                this.csaForm.applyforReceive=this.$date.formatDate(new Date(),"yyyy-MM-DD");
                                this.csaForm.applyforRecipient=JSON.parse(localStorage["user"])[0].userRealname;
                                let formData = new FormData();
                                for(const key in this.csaForm){
                                    if(Object.prototype.hasOwnProperty.call(this.csaForm, key)){
                                        if(this.csaForm[key]!=null){
                                            formData.append(key,this.csaForm[key]);
                                        }
                                    }
                                }
                                addCaseService.addCaseSealApplyfor(this.$http,formData).then(msg=>{
                                    if(msg.data.status==="50000"){
                                        this.$message({
                                            type:"error",
                                            message:"出错了呢~"
                                        })
                                    }else {
                                        this.$message({
                                            type:"success",
                                            message:"提交成功~"
                                        });
                                        this.$emit("changeActive",1)
                                    }
                                })
                            }
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped>
    a{
        text-decoration: none;
    }
    a:link{
        color: blue;
    }
    a:visited{
        color: blue;
    }
    a:hover{
        color: red;
        text-decoration: underline;
    }
    button[disabled]{
        background-color: #a0cfff;
        border-color: #a0cfff;
        cursor: not-allowed;
    }
</style>